<template lang="html">
  <div class="">
    <TopNav />
    <div class="tabs">
      <tabs :value="value" @getIndex="getCurrentIndex">
        <tab index="1" label="城市">
          <ClassifyCity />
        </tab>
        <tab index="2" label="季节">
          <ClassifyMouth />
        </tab>
        <tab index="3" label="月份">
            <ClassifySeason />
        </tab>

      </tabs>
    </div>
  </div>
</template>

<script>
import TopNav from "../../components/TopNav.vue"
import ClassifySeason from "./ClassifySeason/ClassifySeason.vue"
import ClassifyCity from "./ClassifyCity/ClassifyCity.vue"
import ClassifyMouth from "./ClassifyMouth/ClassifyMouth.vue"

export default {
  name:"Classify",
  data(){
    return {
      value:1,
      label:["城市","月份","季节"]
    }
  },
  components:{
    TopNav,
    ClassifySeason,
    ClassifyCity,
    ClassifyMouth
  },
  methods:{
    getCurrentIndex(index){
      this.value= index
    }
  }
}
</script>

<style lang="css" scoped>
.tabs{
  margin-top: 1.3rem;
  font-size: 14px;
}
</style>
